<template>
	<view class="proitem" style="margin-bottom: 20rpx;" @click="go('/pages/product/prodetail?title=兑换商品详情&id='+pro.id)">
		<image class="pic" :src="pro.img" mode="aspectFill"></image>
		<view class="info">
			<view class="proname">
				{{pro.name}}
			</view>
			<view class="price">
				{{pro.price}}积分
			</view>
			<view class="pricebox">
				<image style="width: 15rpx;height: 18rpx;" src="./static/qian.png" mode=""></image>
				{{pro.price}}
			</view>
			<view class="dhbtn">
				马上兑换
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "jfproitem",
		props:{
			pro: {
			    type: Object,
			    default() {
			        return {
						
					};
			    }
			}
		},
		data() {
			return {

			};
		},
		methods:{
			go(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	.proitem {
		width: 336rpx;
	}

	.pic {
		width: 336rpx;
		height: 344rpx;
		border-radius: 15rpx 15rpx 0px 0px;
	}

	.info {
		width: 305rpx;
		padding: 20rpx 12rpx 20rpx 20rpx;
		// height: 129rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 15rpx 15rpx;
		margin-top: -3px;
		position: relative;
		.proname {
			color: #181818;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 30rpx;
			font-weight: bold;
		}

		.price {
			width: fit-content;
			line-height: 37rpx;
			padding: 0 16rpx;
			background: linear-gradient(142deg, rgba(255, 160, 8, .2), rgba(255, 131, 5, .2));
			border-radius: 17rpx;
			margin: 16rpx 0 24rpx;
			font-size: 24rpx;
			color: #FF5F00;
			font-style: italic;
		}

		.pricebox{
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #FD2A00;
			line-height: 28rpx;
		}
		.dhbtn{
			padding: 0 16rpx;
			line-height: 50rpx;
			border: 1rpx solid;
			border-image: linear-gradient(0deg, #FDF7A5, #FFFFFF) 10 10;
			background: #FF5F00;
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			font-weight: bold;
			width: fit-content;
			position: absolute;
			right: 17rpx;
			bottom: 17rpx;
		}
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.jsb{
		justify-content: space-between;
	}
	.fs24 {
		font-size: 24rpx;
	}

	.fs30 {
		font-size: 30rpx;
	}

	.cfd2 {
		color: #FD2A00;
	}

	.fwb {
		font-weight: bold;
	}

	.fs22 {
		font-size: 22rpx;
	}

	.c919 {
		color: #919191;
	}
</style>
